<!DOCTYPE html>
<html lang="en" ng-app="histogramApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Twitter Scraper">
    <meta name="author" content="Michael Peter Christen">
    <link rel="icon" type="image/png" href="../../artwork/favicon.png">
    <title>loklak: Distributed Tweet Search Server</title>

    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/morris.min.css">
    <link href="/css/loklak.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/js/html5shiv.min.js"></script>
      <script src="/js/respond.min.js"></script>
    <![endif]-->

    <script src="/js/angular.min.js"></script>
    <style>
      .search-tweets {
        width:800px;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: stretch;
        align-items: stretch;
        margin-left:350px;
      }
       .search-tweets input{
          width:600px;
          height: 45px;
          padding:8px;
      }
      .search-btn{
        background-color: #d81b60;
        color: white;
        width: 50px;
        height: 45px;
      }
      .loader {
          border: 8px solid #f3f3f3;
          border-radius: 50%;
          border-top: 8px solid #D81B60;
          width: 100px;
          height: 100px;
          -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
          position: relative;
          top:180px;
          left:-320px;
      }

      @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    </style>
  </head>

  <body>
    <div ng-controller="histogram">
      <div class="form-group search-tweets">
            <input type="text" class="form-control" id="tweet-input" ng-model="tweet"
                   ng-init="tweet = ''" ng-keyup="$event.keyCode == 13 && tweet != '' ? drawGraph() : null"
                   placeholder="Enter a tag to plot histogram">
            <span class="input-group-btn">
              <button class="btn search-btn" type="submit" ng-click="tweet != '' ? drawGraph() : null">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </span>
            <div class="loader"></div>
      </div>
      <div id="main">
          <h1 id="header"></h1>
          <div id="myfirstchart" style="height: 250px;"></div>
      </div>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/raphael.min.js"></script>
    <script src="/js/morris.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="histogram.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>
